<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="lib/bootstrap@3.3.4/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        html,body{
            height: 100%;
            overflow: hidden;
        }
        #wrap{
            width: 100%;
            height: 100%;
            position: relative;
        }
        #wrap .box{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%)
        }
        #wrap .playPause{
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
           background-color: #fff;
           border-radius: 50%;
           font-size: 20px;
        }
        .box .time{
            position: absolute;
            left: 20px;
            bottom: 36px;
            color: #fff;
        }
        .box .outer{
            width: 95%;
            height: 8px;
            background: #ccc;
            position: absolute;
            left: 2.5%;
            bottom: 18px;
            border-radius: 5px;
        }
        .box .inner{
            width: 0px;
            height: 100%;
            background: #f00;
        }
        .mutedVolumeFull{
            position: absolute;
            right: 20px;
            bottom: 36px;
            color: #fff;
        }
        .mutedVolumeFull span{
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="box">
            <video src="成龙,金喜善 - 美丽的神话Ⅰ.mp4" class="myVideo"></video>
            <div class="time">
                <span class="currentTime">00:00</span>
                <span class="gang">/</span>
                <span class="durationTime"></span>
            </div>
            <div class="outer">
                <div class="inner"></div>
            </div>
            <div class="mutedVolumeFull">
                <span class="glyphicon glyphicon-headphones"></span>
                <span class="glyphicon glyphicon-volume-down"></span>
                <span class="glyphicon glyphicon-volume-up"></span>
                <span class="glyphicon glyphicon-fullscreen"></span>
            </div>
        </div>
        <div class="playPause">
            <span class="glyphicon glyphicon-play"></span>
        </div>
    </div>
    
</body> 
<script>
    window.onload=function(){
        //播放暂停==================================================================================
        var myvideo=document.querySelector(".myVideo")
        var playPause=document.querySelector(".playPause")
        playPause.onclick=function(){
            if(myvideo.paused){
                myvideo.play();
                playPause.children[0].className="glyphicon glyphicon-pause"
            }else{
                myvideo.pause();
                playPause.children[0].className="glyphicon glyphicon-play"
            }
        }
        //时间================================================================================
        var currentTime=document.querySelector(".currentTime")
        var durationTime=document.querySelector(".durationTime")
        durationTime.innerHTML=timeFormat(myvideo.duration);
        myvideo.ontimeupdate=function(){
            currentTime.innerHTML=timeFormat(myvideo.currentTime);
            var inner=document.querySelector(".inner");
            var bfb=myvideo.currentTime/myvideo.duration*100+"%";
            inner.style.width=bfb;
        }
        //进度条=========================================================================
        var outer=document.querySelector(".outer")
        // outer.onclick=function(evt){
        //     var x=evt.pageX-outer.getBoundingClientRect().left;
        //     outerWidth=outer.offsetWidth;
        //     myvideo.currentTime=x/outerWidth*myvideo.duration;
        // }
        outer.onmousedown=function(evt){
            var x=evt.pageX-outer.getBoundingClientRect().left;
            outerWidth=outer.offsetWidth;
            myvideo.currentTime=x/outerWidth*myvideo.duration;
            this.move=true;
        }
        outer.onmousemove=function(evt){
            if(this.move){
                var x=evt.pageX-outer.getBoundingClientRect().left;
                outerWidth=outer.offsetWidth;
                var inner=document.querySelector(".inner")
                inner.style.width=x+"px"
                myvideo.currentTime=x/outerWidth*myvideo.duration;
            }
        }
        outer.onmouseup=function(){
            this.move=false;
        }
        //静音==================================================================
        var mutedVolumeFull=document.querySelector(".mutedVolumeFull")
        mutedVolumeFull.children[0].onclick=function(){
            if(myvideo.muted){
                myvideo.muted=false;
                this.className="glyphicon glyphicon-headphones"
            }else{
                myvideo.muted=true;
                this.className="glyphicon glyphicon-volume-off"
            }
        }
        //音量===================================================================
        mutedVolumeFull.children[1].onclick=function(){
            if(myvideo.volume>0 && myvideo.volume<0.1){
                mutedVolumeFull.children[0].className="glyphicon glyphicon-volume-off"
            }else{
                myvideo.volume=myvideo.volume-0.1
            }
            return;
        }
        mutedVolumeFull.children[2].onclick=function(){
            if(myvideo.volume>0 && myvideo.volume<1){
                mutedVolumeFull.children[0].className="glyphicon glyphicon-headphones"
                myvideo.volume=myvideo.volume+0.1
            }
        }
        //全屏
        mutedVolumeFull.children[3].onclick=function(){
            myvideo.webkitRequestFullScreen()
        }

        //如果没有写window.onload  则使用myVideo.currentTime
        //时间转换
        function timeFormat(time){
            var second=parseInt(time);
            var minute=0;
            var hour=0;
            if(second>=60){
                minute=parseInt(second/60);
                second=parseInt(second%60);
                if(minute>=60){
                    hour=parseInt(minute/60);
                    minute=parseInt(minute%60);
                }
            }
            if(second<10){
                second="0"+second;
            }
            if(minute<10){
                minute="0"+minute;
            }
            var result=minute+":"+second
            if(hour>0){
                result=hour+":"+result;
            }
            return result;
        }

    }
</script>
</html>